<template>
  <div class="scene_box">
    <h3>克隆.clone()和复制.copy()</h3>
    <div class="canvas"></div>
  </div>
</template>
    
    <script setup>
import { nextTick } from "vue";
import * as THREE from "three";
// 引入threejs 的扩展库  相机轨道控件
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import boxMesh from "../../js/chapter3/fu.js";
nextTick(() => {
  // ******************创建一个场景*************
  let className = ".canvas";
  const scene = new THREE.Scene();
  // const geometry = new THREE.BoxGeometry(80, 80, 80);
  // const material = new THREE.MeshLambertMaterial({
  //   color: 0x00ffa0,
  //   transparent: false,
  //   opacity: 0.5,
  // });
  // const boxMesh = new THREE.Mesh(geometry, material);
  // boxMesh.position.set(0, 0, 0);
  scene.add(boxMesh);
  const xyz = new THREE.AxesHelper(100);
  scene.add(xyz);
  // ****************添加光源*********************
  // ####################### 点光源 ###################################

  const light = new THREE.PointLight(0xffffff, 1);
  // 光照强度
  light.intensity = 20.0;
  light.decay = 0.0;
  light.position.set(50, 50, 50);
  const lightHelper = new THREE.PointLightHelper(light, 12);
  // scene.add(lightHelper);

  // ############################# 环境光 ################################

  const ambient = new THREE.AmbientLight(0xffffff, 0.4);
  scene.add(ambient);

  // ########################### 平行光 ####################################
  const dirLight = new THREE.DirectionalLight(0xffff, 1.0);

  dirLight.position.set(50, 50, 50);
  dirLight.target = boxMesh;
  scene.add(dirLight);

  const dirLightHelper = new THREE.DirectionalLightHelper(
    dirLight,
    10,
    0xff0000
  );
  // scene.add(dirLightHelper);
  // *****************照相机******************
  const width = 800;
  const height = 500;
  const camera = new THREE.PerspectiveCamera(30, width / height, 0.1, 3000);
  camera.position.set(200, 200, 200);
  camera.lookAt(boxMesh.position);

  // *****************渲染器*****canvas*************
  const renderer = new THREE.WebGLRenderer({
    antialias: true, //是否执行抗锯齿，默认不抗false
  });
  renderer.setSize(width, height);
  const Dom = document.querySelector(className);
  Dom.appendChild(renderer.domElement);

  //******************创建一个相机控件***************
  const cintrols = new OrbitControls(camera, renderer.domElement);
  renderer.render(scene, camera);
  cintrols.addEventListener("change", function () {
    renderer.render(scene, camera);
  });
  // ********************* 动画 *** 渲染循环 *********************************
  /**
   * 旋转动画
   * */
  function rotate() {
    boxMesh.rotateY(0.005);
    renderer.render(scene, camera);
    requestAnimationFrame(rotate);
  }
  // rotate();
  renderer.setPixelRatio(window.devicePixelRatio);
});
</script>
    
    
    <style lang="scss" scoped>
</style>